<template>
  <div>
    <van-config-provider :theme-vars="navBarVars">
      <!-- 顶部导航栏NavBar -->
      <van-nav-bar
        :title="active"
        left-text="返回"
        left-arrow
        safe-area-inset-top
        @click-left="onClickLeft"
        z-index="100"
      />
    </van-config-provider>
    <router-view></router-view>
    <van-config-provider :theme-vars="tabbarVars">
      <!-- 底部导航栏Tabbar -->
      <van-tabbar
        v-model="active"
        route
        fixed
        active-color="#ee0a24"
        z-index="100"
      >
        <van-tabbar-item
          v-for="item in tabbarList"
          :replace="item.replace"
          :name="item.title"
          :to="item.path"
          :icon="item.icon"
          >{{ item.title }}</van-tabbar-item
        >
      </van-tabbar>
    </van-config-provider>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";

const active = ref("首页");
const tabbarList = ref([
  {
    title: "首页",
    icon: "home-o",
    path: "/home",
    name: "home",
    replace: true,
  },
  {
    title: "分类",
    icon: "apps-o",
    path: "/category",
    name: "category",
    replace: false,
  },
  {
    title: "购物车",
    icon: "cart-o",
    path: "/cart",
    name: "cart",
    replace: false,
  },
  {
    title: "我的",
    icon: "user-o",
    path: "/my",
    name: "my",
    replace: false,
  },
]);
const onClickLeft = () => history.back();

/* 
  配置NavBar的样式
    tabbarVars 内的值会被转换成对应 CSS 变量
    比如 sliderBarHeight 会转换成 `--van-slider-bar-height`
 */
const tabbarVars = reactive({});
/* 配置Tabbar的样式 */
const navBarVars = reactive({});
</script>

<style></style>
